<style scoped>
.Popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10000;
}

.content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
</style>
<template>
	<transition name="fade">
		<div class="Popup position-fixed" v-if="props.modelValue" @click="close">
			<div class="content" @click.stop>
				<slot />
			</div>
		</div>
	</transition>
</template>
<script setup>
const { defineProps, defineEmits } = Vue,
	props = defineProps(["modelValue", "customClose"]),
	emit = defineEmits(["update:modelValue"]),
	close = () => {
		if (props?.customClose) emit("update:modelValue", false);
	};
</script>
